<template>
  <div class="home-left-top-wrapper">
      <blockTitle v-if="dataSet.leftTop" :words="dataSet.leftTop.title" ref="homeLeftTop"></blockTitle>
      <div class="left-border" ref="leftBorder"></div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import blockTitle from '../../../components/common/blockTitle'
export default {
  name: 'homeLeftTop',
  data() {
    return {}
  },
  computed: {
    ...mapState(['dataSet'])
  },
  mounted() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      let leftBorder = TweenMax.to(this.$refs.leftBorder, 3, {height: '926px'})
      tl.add(this.$refs.homeLeftTop.init(), 0)
        .add(leftBorder, 0.8)
        return tl;
    }
  },
  components: {
      blockTitle
  }
}
</script>
<style lang="scss" scoped>
.block-title-wrapper {
  width: 100%;
  height: 100%;
  background: url('../../../assets/imgs/topTitle/group_left_title_bg.png')
    no-repeat right;
  .title-text {
    line-height: 1.9;
    font-size: 20px;
    text-align: center;
    color: #fff;

    text-shadow: 1px 1px 4px #25a0ff, 1px -1px 4px #25a0ff, -1px 1px 4px #25a0ff,
      -1px -1px 3px #25a0ff;
  }
}
.left-border {
  position: absolute;
  width: 7px;
  height: 0;
  left: 0;
  top: 30px;
  background: url('../../../assets/imgs/left/left-border.png')
}
</style>
